<template>
  <div
    class="navigation"
    :style="{
      'background-color': facade.background_color
    }"
  >
    <div
      class="navigation-text"
      :class="{ one: facade.nav_style == 1, two: facade.nav_style == 2 }"
      v-if="content.style == 2"
    >
      <div class="navigation-text-item" v-for="(item, index) in navigationData" :key="index" :style="{ width: width }">
        <span
          class="navigation-text-item__title"
          :style="{
            color: facade.text_color
          }"
        >
          {{ item.title }}
        </span>
      </div>
    </div>
    <div
      class="navigation-image"
      :class="{ one: facade.nav_style == 1, two: facade.nav_style == 2 }"
      v-if="content.style == 1"
    >
      <div class="navigation-image-item" v-for="(item, index) in navigationData" :key="index" :style="{ width: width }">
        <div
          class="navigation-image-item__cover"
          :style="{
            'background-image': 'url(' + getCover(item.url) + ')'
          }"
        ></div>
        <div
          class="navigation-image-item__title"
          :style="{
            color: facade.text_color
          }"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="navigation-indicator" v-if="facade.nav_style == 2">
      <pointer :margin="-10" :color="facade.active_color" :type="facade.indicator_style" align="center"></pointer>
    </div>
  </div>
</template>
<script type="text/javascript">
import pointer from '@/components/pointer.vue';
export default {
  components: {
    pointer
  },
  props: {
    facade: {
      type: [Object, Array]
    },
    content: {
      type: [Object, Array]
    }
  },
  data() {
    return {
      navigation: [
        {
          id: 1,
          title: '导航一',
          url: '',
          link: {}
        }
      ]
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    navigationData: {
      get() {
        if (this.navigation.length === 0) {
          return [
            {
              url: '',
              title: '导航一',
              link: {}
            },
            {
              url: '',
              title: '导航二',
              link: {}
            },
            {
              url: '',
              title: '导航三',
              link: {}
            },
            {
              url: '',
              title: '导航四',
              link: {}
            }
          ];
        } else {
          return this.navigation;
        }
      },
      set() {}
    },
    width() {
      if (this.facade.nav_style == 1) {
        if (this.content.style == 1) {
          if (this.navigationData.length > 5) {
            return '24%';
          } else {
            return 100 / this.navigationData.length + '%';
          }
        }
        if (this.content.style == 2) {
          if (this.navigationData.length > 4) {
            return '30%';
          } else {
            return 100 / this.navigationData.length + '%';
          }
        }
      } else {
        return 100 / this.facade.nav_line_mun + '%';
      }
    }
  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {},
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    content: {
      deep: true,
      handler: function (newV, oldV) {
        this.handleCheck();
      }
    },
    facade: {
      deep: true,
      handler: function (newV, oldV) {
        this.handleCheck();
      }
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {
    this.handleCheck();
  },
  methods: {
    handleCheck() {
      if (this.content.data.length > 0) {
        this.navigation = this.content.data;
      }
      if (this.facade.nav_style == 2) {
        let data = this.content.data;
        let l = this.facade.nav_line * this.facade.nav_line_mun;
        this.navigation = data.slice(0, l);
      }
    },
    getCover(cover = '') {
      let url = 'https://img.yzcdn.cn/upload_files/2018/01/22/FnlHRufXMtUI_AbAEP0tux_nDL1T.png!large.webp';
      if (cover) {
        return cover;
      }
      return url;
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    }
  }
};
</script>
<style lang="less" scoped>
@import './element.less';
</style>
